<template>
  <a-spin :spinning="loading">
    <div>
      <a-form-model
        class="fromModels"
        :model="activationFroms"
        ref="activationModel"
        layout="vertical"
        :labelCol="{ span: 10 }"
        :wrapperCol="{ span: 14 }"
      >
        <div class="centes">
          <div class="centes_confis">
            <a-form-model-item label="激励奖励开关">
              <a-radio-group v-model="status">
                <a-radio :value="1"> 开 </a-radio>
                <a-radio :value="0"> 关 </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="激活开始时间">
              <a-radio-group v-model="activationFroms.time">
                <a-radio :value="1"> 首次交易 </a-radio>
                <a-radio :value="0"> 注册时间 </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="激活结束时间">
              <a-input v-model="activationFroms.end_day">
                <div slot="addonAfter">天</div>
              </a-input>
            </a-form-model-item>
            <a-form-model-item label="下发规则">
              <a-radio-group v-model="activationFroms.rule">
                <a-radio :value="1"> 手动下发 </a-radio>
                <a-radio :value="0"> 自动下发 </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="领取次数">
              <a-select v-model="activationFroms.count">
                <a-select-option :value="1">1</a-select-option>
                <a-select-option :value="2">2</a-select-option>
                <a-select-option :value="3">3</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="税费费率">
              <a-input v-model="activationFroms.tax_rate">
                <div slot="addonAfter">万</div>
              </a-input>
            </a-form-model-item>
          </div>
        </div>

        <div class="confish">
          <div class="confish_items">
            <a-form-model-item :wrapperCol="{ span: 14, offset: 10 }">
              <div>代还</div>
            </a-form-model-item>
            <a-form-model-item label="达标金额">
              <a-input v-model="activationFroms.repayment_money">
                <div slot="addonAfter">元</div>
              </a-input>
            </a-form-model-item>
            <a-form-model-item
              v-for="(item, ins) in activationFroms.repayment"
              :key="ins"
              :prop="'repayment.' + ins"
              :label="ins + '级返佣金额'"
              :rules="[{ required: true, message: '请输入' + ins + '级返佣金额', trigger: 'blur' }]"
            >
              <div class="disse">
                <a-input v-model="activationFroms.repayment[ins]">
                  <div slot="addonAfter">元</div>
                </a-input>
                <a-icon class="disseicon" type="minus-circle" @click="lineChanges('repayment', 'del', ins)" />
              </div>
            </a-form-model-item>
            <a-form-model-item :wrapperCol="{ span: 14, offset: 15 }">
              <a-button type="primary" @click="lineChanges('repayment', 'add')">新增一行</a-button>
            </a-form-model-item>
          </div>

          <div class="confish_items">
            <a-form-model-item :wrapperCol="{ span: 14, offset: 10 }">
              <div>快捷</div>
            </a-form-model-item>
            <a-form-model-item label="达标金额">
              <a-input v-model="activationFroms.collection_money">
                <div slot="addonAfter">元</div>
              </a-input>
            </a-form-model-item>
            <a-form-model-item
              v-for="(item, inds) in activationFroms.collection"
              :key="'collection' + inds"
              :prop="'collection.' + inds"
              :label="inds + '级返佣金额'"
              :rules="[{ required: true, message: '请输入' + inds + '级返佣金额', trigger: 'blur' }]"
            >
              <div class="disse">
                <a-input v-model="activationFroms.collection[inds]">
                  <div slot="addonAfter">元</div>
                </a-input>
                <a-icon class="disseicon" type="minus-circle" @click="lineChanges('collection', 'del', index)" />
              </div>
            </a-form-model-item>
            <a-form-model-item :wrapperCol="{ span: 14, offset: 15 }">
              <a-button type="primary" @click="lineChanges('collection', 'add')">新增一行</a-button>
            </a-form-model-item>
          </div>
        </div>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" @click="whites">提交</a-button>
          <a-button type="primary" @click="getPrivacyAgreementInfo()">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-spin>
</template>

<script>
import { getRebateApi, setRebateApi } from '@/api/return.js'
export default {
  name: 'activation',

  data() {
    return {
      loading: false,
      activationFroms: {
        collection: [],
        collection_money: '',
        count: 1,
        end_day: '',
        repayment: [],
        repayment_money: '',
        rule: 1,
        tax_rate: '0',
        time: 1
      },
      status: 1
    }
  },
  created() {
    this.getPrivacyAgreementInfo()
  },
  methods: {
    lineChanges(key, type, ins) {
      if (type == 'add') {
        this.activationFroms[key].push('')
      }
      if (type == 'del') {
        this.activationFroms[key].splice(ins, 1)
      }
    },

    getPrivacyAgreementInfo() {
      this.loading = true
      getRebateApi({
        type: 'activation_rebate',
        brand_id: process.env.VUE_APP_BRAND_ID
      })
        .then(res => {
          this.activationFroms = res.data.config
          this.status = res.data.status
        })
        .finally(() => {
          this.loading = false
        })
    },
    whites() {
      this.$refs.activationModel.validate(valid => {
        if (valid) {
          setRebateApi({
            brand_id: process.env.VUE_APP_BRAND_ID,
            type: 'activation_rebate',
            status: this.status,
            data: this.activationFroms
          }).then(res => {
            this.$message.success('操作成功')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.centes {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.centes_confis {
  width: 50%;
}
.confish {
  display: flex;
  align-items: self-start;
  justify-content: space-between;
}
.confish_items {
  width: 48%;
}
</style>
